
<template>
	<view class="industry-box">
		<!-- 搜索组件 -->
		<view class="industry-search-box">
			<view class="industry-search-content">
				<image class="search-icon" src="/static/search_icon.png" mode="aspectFit"></image>
				<input class="search-input" type="text" placeholder="请输入行业名称" placeholder-class="search-input-placeholder" v-model="keyword" @blur="searchAction" />
			</view>
		</view>
		<!-- 支行列表 -->
		<view class="industry-list">
			<view class="industry-item" v-for="(item,index) in dataList" :key="index" @tap="selectIndustry(item)">
				<text class="industry-name">{{item.mccName}}</text>
				<image class="industry-right-icon" src="/static/right_gray_icon.png" mode="aspectFit"></image>
				<view class="industry-line"></view>
			</view>
		</view>
		<view style="padding-bottom: 30rpx;">
			<u-loadmore :status="loadStatus" :fontSize="14" :iconSize="16" loadingIcon="semicircle" loadmoreText="点击或上拉加载更多" v-if="dataList.length > 0" @loadmore="loadData(false)"></u-loadmore>
		</view>
	</view>
</template>

<script setup>
	
	import { ref } from 'vue'
	import { onLoad, onPullDownRefresh,onReachBottom} from '@dcloudio/uni-app'
	import { useFormStore } from '@/stores'
	import { getIndustryList } from '@/config/api.js'
	import { kFirstPage, kPageCount } from '@/config/config'
	
	const formStore = useFormStore()
	// 搜索关键词
	const keyword = ref('')
	//支行列表数据
	const dataList = ref([])
	//当前页
	const page = ref(1)
	///上拉加载状态
	const loadStatus = ref('loadmore')
	
	//选择行业
	const selectIndustry = (item)=>{
		formStore.mccType = item.mccCode
		formStore.mccTypeName = item.mccName
		uni.navigateBack()
	}
	// 搜索
	const searchAction = () => {
		loadData()
	}
	//页面加载时
	onLoad(()=>{
		loadData()
	})
	//下拉筛选
	onPullDownRefresh(()=>{
		loadData()
	})
	//上拉加载
	onReachBottom(()=>{
		if(loadStatus.value == 'nomore'){
			return
		}
		loadStatus.value = 'loading'
		loadData(false)
	})
	//加载数据
	const loadData = (isRefresh = true) => {
		let currentPage = page.value
		if (isRefresh) {
			currentPage = 1
		} else {
			currentPage = page.value + 1
		}
		getIndustryList({'mccName':keyword.value},currentPage).then(res=>{
			uni.stopPullDownRefresh()
			loadStatus.value = currentPage >= res.page.totalPages ? 'nomore' : 'loadmore'
			if(isRefresh){
				dataList.value = []
				page.value = kFirstPage
				dataList.value = res.result
			}
			else{
				page.value = currentPage
				dataList.value = [...dataList.value,...res.result]
			}
		}).catch(()=>{
			loadStatus.value = 'loadmore'
			uni.stopPullDownRefresh()
		})
	}
</script>

<style lang="scss" scoped>
.industry-box{
	.industry-search-box{
		display: flex;
		align-items: center;
		width: 100%;
		background-color: $xh-bg-color;
		height: 132rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		.industry-search-content{
			display: flex;
			align-items: center;
			height: 72rpx;
			background-color: white;
			border-radius: 36rpx;
			border: 1px solid #cecece;
			padding: 0 30rpx;
			width: 100%;
			.search-icon{
				width: 48rpx;
				height: 48rpx;
				flex-shrink: 0;
			}
			.search-input{
				font-size: 28rpx;
				flex: 1;
				margin-left: 20rpx;
			}
			.search-input-placeholder{
				color: #ccc;
			}
		}
	}
	.industry-list{
		background-color: white;
		.industry-item{
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			position: relative;
			.industry-right-icon{
				width: 24rpx;
				height: 24rpx;
				margin-left: auto;
				flex-shrink: 0;
			}
			.industry-name{
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient:vertical;
				-webkit-line-clamp:2;
				margin-right: 30rpx;
			}
			.industry-line{
				position: absolute;
				left: 30rpx;
				right: 0;
				bottom: 0;
				height: 1px;
				transform: scaleY(0.5);
				background-color: $xh-line-color;
			}
		}
	}
	
}
</style>
